import { App } from 'vue';

// 导入所有编辑器组件
import EditorText from './EditorText.vue';
import EditorImage from './EditorImage.vue';
import EditorButton from './EditorButton.vue';
import EditorBanner from './EditorBanner.vue';
import EditorProducts from './EditorProducts.vue';
import EditorForm from './EditorForm.vue';
import EditorVideo from './EditorVideo.vue';
import EditorNav from './EditorNav.vue';
import EditorCard from './EditorCard.vue';
import EditorTabs from './EditorTabs.vue';
import EditorCountdown from './EditorCountdown.vue';
import EditorLocation from './EditorLocation.vue';
import EditorContact from './EditorContact.vue';
import EditorDivider from './EditorDivider.vue';
import EditorSlider from './EditorSlider.vue';

// 导入图标资源
import textIcon from '@/assets/editor/文本编辑.png';
import imageIcon from '@/assets/editor/图片.png';
import buttonIcon from '@/assets/editor/按钮.png';
import cardIcon from '@/assets/editor/卡片.png';
import dividerIcon from '@/assets/editor/Edit_分割线_dividing-line-one_linear.png';
import tabsIcon from '@/assets/editor/选项卡.png';
import videoIcon from '@/assets/editor/视频组件.png';
import formIcon from '@/assets/editor/表单组件-表格.png';
import sliderIcon from '@/assets/editor/滑块组件-1.png';
import contactIcon from '@/assets/editor/联系方式.png';
import locationIcon from '@/assets/editor/ditu.png';
import countdownIcon from '@/assets/editor/倒计时.png';
import productsIcon from '@/assets/editor/商品列表详细列表.png';
import bannerIcon from '@/assets/editor/轮播图管理.png';

// 组件列表
const components = [
  EditorText,
  EditorImage,
  EditorButton,
  EditorBanner,
  EditorProducts,
  EditorForm,
  EditorVideo,
  EditorNav,
  EditorCard,
  EditorTabs,
  EditorCountdown,
  EditorLocation,
  EditorContact,
  EditorDivider,
  EditorSlider
];

// 统一注册组件
export const registerEditorComponents = (app: App) => {
  components.forEach(component => {
    app.component(component.name, component);
  });
};

export {
  EditorText,
  EditorImage,
  EditorButton,
  EditorBanner,
  EditorProducts,
  EditorForm,
  EditorVideo,
  EditorNav,
  EditorCard,
  EditorTabs,
  EditorCountdown,
  EditorLocation,
  EditorContact,
  EditorDivider,
  EditorSlider
};

// 组件库配置信息
export const componentsLibraryConfig = [
  {
    id: 'text',
    name: '文本',
    icon: textIcon,
    category: 'basic',
    component: 'editor-text',
    defaultProps: {
      content: '文本内容',
      color: '#333333',
      fontSize: 16,
      textAlign: 'center',
      fontWeight: 'normal',
      lineHeight: 1.5,
      padding: 6,
      styleType: ''
    }
  },
  {
    id: 'title',
    name: '标题文本',
    icon: textIcon,
    category: 'basic',
    component: 'editor-text',
    defaultProps: {
      content: '标题文本',
      color: '#e74c3c',
      fontSize: 18,
      textAlign: 'center',
      fontWeight: '600',
      lineHeight: 1.5,
      padding: 6,
      styleType: 'title'
    }
  },
  {
    id: 'hot-title',
    name: '热门标题',
    icon: textIcon,
    category: 'basic',
    component: 'editor-text',
    defaultProps: {
      content: '热门标题',
      color: '#e74c3c',
      fontSize: 16,
      textAlign: 'center',
      fontWeight: '600',
      lineHeight: 1.5,
      padding: 4,
      styleType: 'hot-title'
    }
  },
  {
    id: 'image',
    name: '图片',
    icon: imageIcon,
    category: 'basic',
    component: 'editor-image',
    defaultProps: {
      src: 'https://pic1.imgdb.cn/item/683e9d8e58cb8da5c82829c7.png',
      width: '100%',
      height: 'auto',
      borderRadius: 0,
      showTitle: false,
      title: '',
      aspectRatio: '16/9'
    }
  },
  {
    id: 'button',
    name: '按钮',
    icon: buttonIcon,
    category: 'basic',
    component: 'editor-button',
    defaultProps: {
      text: '按钮',
      type: 'primary',
      size: 'medium',
      backgroundColor: '#8B4513',
      color: '#FFFFFF',
      borderRadius: 4,
      icon: '',
      link: '',
      block: false
    }
  },
  {
    id: 'banner',
    name: '轮播图',
    icon: bannerIcon,
    category: 'business',
    component: 'editor-banner',
    defaultProps: {
      images: [
        'https://pic1.imgdb.cn/item/683e9d8e58cb8da5c82829c7.png',
        'https://pic1.imgdb.cn/item/683e9dc958cb8da5c8282c4e.png'
      ],
      height: 200,
      autoplay: true,
      interval: 3000,
      showIndicator: true,
      borderRadius: 0
    }
  },
  {
    id: 'products',
    name: '商品列表',
    icon: productsIcon,
    category: 'business',
    component: 'editor-products',
    defaultProps: {
      columns: 2,
      showPrice: true,
      showTitle: true,
      showTag: false,
      productCount: 2,
      priceColor: '#ff4400',
      titleColor: '#333333',
      cardStyle: 'shadow',
      backgroundColor: '#ffffff'
    }
  },
  {
    id: 'form',
    name: '表单',
    icon: formIcon,
    category: 'form',
    component: 'editor-form',
    defaultProps: {
      title: '信息收集',
      fields: [
        { type: 'text', label: '姓名', required: true },
        { type: 'phone', label: '手机号', required: true },
        { type: 'textarea', label: '留言', required: false }
      ],
      submitText: '提交',
      buttonColor: '#8B4513',
      titleColor: '#333333',
      labelColor: '#666666'
    }
  },
  {
    id: 'video',
    name: '视频',
    icon: videoIcon,
    category: 'media',
    component: 'editor-video',
    defaultProps: {
      src: 'https://www.w3schools.com/html/mov_bbb.mp4',
      poster: 'https://pic1.imgdb.cn/item/683e9d8e58cb8da5c82829c7.png',
      controls: true,
      autoplay: false,
      loop: false,
      muted: false,
      width: '100%',
      height: 'auto'
    }
  },
  {
    id: 'nav',
    name: '导航菜单',
    icon: buttonIcon,
    category: 'layout',
    component: 'editor-nav',
    defaultProps: {
      items: [
        { text: '首页', link: '/home', icon: 'home' },
        { text: '分类', link: '/category', icon: 'grid' },
        { text: '购物车', link: '/cart', icon: 'shopping-cart' },
        { text: '我的', link: '/mine', icon: 'user' }
      ],
      showIcon: true,
      backgroundColor: '#ffffff',
      activeColor: '#8B4513',
      inactiveColor: '#333333',
      position: 'bottom',
      fixed: true
    }
  },
  {
    id: 'card',
    name: '卡片',
    icon: cardIcon,
    category: 'basic',
    component: 'editor-card',
    defaultProps: {
      title: '卡片标题',
      showTitle: true,
      shadow: true,
      borderRadius: 8,
      padding: 15,
      backgroundColor: '#ffffff',
      titleColor: '#333333',
      borderColor: '#f0f0f0'
    }
  },
  {
    id: 'tabs',
    name: '选项卡',
    icon: tabsIcon,
    category: 'layout',
    component: 'editor-tabs',
    defaultProps: {
      tabs: [
        { label: '选项一', content: '选项一内容', components: [] },
        { label: '选项二', content: '选项二内容', components: [] },
        { label: '选项三', content: '选项三内容', components: [] }
      ],
      activeColor: '#8B4513',
      inactiveColor: '#666666',
      backgroundColor: '#ffffff',
      type: 'line',
      centered: false
    }
  },
  {
    id: 'countdown',
    name: '倒计时',
    icon: countdownIcon,
    category: 'business',
    component: 'editor-countdown',
    defaultProps: {
      endTime: '2023-12-31 23:59:59',
      title: '活动倒计时',
      showTitle: true,
      showDays: true,
      showHours: true,
      showMinutes: true,
      showSeconds: true,
      backgroundColor: '#ffffff',
      titleColor: '#333333',
      digitColor: '#8B4513',
      digitBackgroundColor: '#f5f5f5'
    }
  },
  {
    id: 'location',
    name: '地理位置',
    icon: locationIcon,
    category: 'business',
    component: 'editor-location',
    defaultProps: {
      address: '北京市朝阳区建国路甲92号',
      title: '公司地址',
      showPhone: true,
      phone: '010-12345678',
      showNavigationButton: true,
      navigationButtonText: '导航到这里',
      buttonColor: '#8B4513',
      backgroundColor: '#ffffff',
      textColor: '#333333'
    }
  },
  {
    id: 'contact',
    name: '联系方式',
    icon: contactIcon,
    category: 'business',
    component: 'editor-contact',
    defaultProps: {
      phone: '010-12345678',
      email: 'contact@example.com',
      wechat: 'example_wechat',
      showPhone: true,
      showEmail: true,
      showWechat: true,
      title: '联系我们',
      backgroundColor: '#ffffff',
      titleColor: '#333333',
      iconColor: '#8B4513'
    }
  },
  {
    id: 'divider',
    name: '分割线',
    icon: dividerIcon,
    category: 'basic',
    component: 'editor-divider',
    defaultProps: {
      text: '',
      showText: false,
      orientation: 'center',
      type: 'solid',
      color: '#e0e0e0',
      textColor: '#999999',
      margin: 15
    }
  },
  {
    id: 'slider',
    name: '滑块',
    icon: sliderIcon,
    category: 'form',
    component: 'editor-slider',
    defaultProps: {
      min: 0,
      max: 100,
      step: 1,
      defaultValue: 50,
      showInput: true,
      showStops: false,
      range: false,
      vertical: false,
      height: 200,
      activeColor: '#8B4513',
      backgroundColor: '#e0e0e0'
    }
  }
]; 